<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <el-input disabled :placeholder="placeholder" type="number" size="default"/>
    </div>
    <div v-else-if="mode === 'PC' && !readonly">
      <el-input v-model="_value" clearable :placeholder="placeholder" type="number" size="default"/>
    </div>
    <div v-else-if="mode === 'MOBILE' && !readonly">
      <field v-model="_value" type="number" :placeholder="placeholder" />
    </div>
    <div v-else>
      {{ _value }}
    </div>
    <!--    <div v-else>
        <field readonly clickable v-model="_value" type="number" @click="showKey = true" :placeholder="placeholder"></field>
        <number-keyboard v-model="_value" theme="custom" :extra-key="['-', '.']"
                         close-button-text="完成" :show="showKey" :maxlength="15" @blur="showKey = false"/>
      </div>-->
  </div>
</template>

<script>
import { Field, NumberKeyboard } from 'vant'
import componentMinxins from '/@/views/setting/workflow/components/ComponentMinxins'
import { computed, reactive, toRefs } from 'vue'

export default {
    name: 'NumberInput',
    mixins: [componentMinxins],
    components: { Field, NumberKeyboard },
    props: {
        modelValue: {
            type: Number,
            default: undefined,
        },
        placeholder: {
            type: String,
            default: '请输入数值',
        },
        precision: {
            type: Number,
            default: 0,
        },
    },
    setup(props, context) {
        const { modelValue, precision } = toRefs(props)
        const state = reactive({
            showKey: false,
        })
        const _value = computed({
            get() {
                return parseNumber(modelValue.value)
            },
            set(val) {
                context.emit('update:modelValue', parseNumber(val))
            },
        })
        const parseNumber = (val) => {
            if (typeof val === 'string') {
                return precision.value > 0
                ? parseFloat(parseFloat(val).toFixed(precision.value))
                : parseInt(val)
            }
            return val
        }
        const isNaN = (value) => {
            return typeof value === 'number' && isNaN(value)
        }
        return {
            ...toRefs(state),
            _value,
            parseNumber,
            isNaN
        }
    }
}
</script>

<style>

</style>